import {
	observer,
} from 'mobx-react';
import {
	Radio,
	Icon,
} from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

@observer
export default class Select extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const {
			store
		} = this.props, {
			radio,
			subCompanyId,
			handleRadioGroupChange,
			hasArrow,
			showLeft,
			showRight,
			radioConfigs,
		} = store;

		return (
			<div className='radio'>
				{
					hasArrow && <Icon type="caret-left" onClick={showLeft}/>
				}
				<RadioGroup onChange={handleRadioGroupChange} value={subCompanyId}>
				{
					radioConfigs.map(config => {
						const {
							id,
							subcompanyName
						} = config;

						return  <RadioButton value={id}>{subcompanyName}</RadioButton>
					})
				}
				</RadioGroup>
				{
					hasArrow && <Icon type="caret-right" onClick={showRight}/>
				}
			</div>
		);
	}
}